<template>
  <div>
    <!-- 头部商品安全溯源 -->
    <template>
      <view class="banner-top">
      </view>
    </template>
    <!-- 金刚位 -->
    <view class="part">
      <view class="part-box" v-for="item,index in partList" :key="index" @click="jump(item.icon)">
        <image :src="`../../static/image/part/${item.icon}.png`"></image>
        <text>{{item.name}}</text>
      </view>
    </view>
    <!-- 商品信息 -->
    <div class="box" id="goods">
      <div class="box-title">
        <image src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/16/IwROfNzt2pAoeEaAe9ZjEtpfNlxi70tiMQxdD9LJ.svg"></image>
        <text>商品信息</text>
      </div>
      <div class="box-line"></div>
      
      <div class="shop">
        <view class="shop-info-title">{{ shopInfo.name }}</view>
        <u-swiper :list="[shopInfo.pic]" height="380"></u-swiper>
      </div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in shop_basic_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span class="shopBasic-span">{{ shopInfo[item.value] }}</span>
      </div>
    </div>

    <!-- 查询信息 -->
    <div class="box" id="query">
      <span class="box-title">
        <image src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/17/Sp3JTVg30vRATdmAguzwDhIcFJbJHYAzUAezKvOY.svg"></image>
        <text>查询信息</text>
      </span>
      <div class="box-line"></div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in query_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span class="shopBasic-span">{{ shopInfo[item.value] }}</span>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="box" id="order">
      <span class="box-title">
        <image src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/16/5hlERepPymBX6HCLkqmRRtdN6TeDy8a8qs7FqYqa.svg"></image>
        <text >订单信息</text>
      </span>
      <div class="box-line"></div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in order_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span class="shopBasic-span">{{ shopInfo[item.value] }}</span>
      </div>
    </div>

    <!-- 供应商信息 -->
    <div class="box" id="supplier">
      <div class="box-auxiliary row_between">
        <span class="box-title">
          <image src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/17/rrfPGm3bB66IUGNXsRvDZkDvQM293huZOZ214KYs.svg"></image>
          <text>供应商信息</text>
        </span>
        <!-- <div class="box-auxiliary-right row_start" @click="openzizhi">
          <span>查看资质</span>
          <uni-icons type="forward" size="18"></uni-icons>
        </div> -->
      </div>
      <div class="box-line"></div>
      <div
        class="shopBasic"
        :class="item.type == 'img' ? 'column_start' : 'row_between'"
        v-for="(item, index) in supplier_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span class="shopBasic-span" v-if="item.type != 'img'">{{
          shopInfo[item.value]
        }}</span>
        <div class="shopBasic-imgs" v-else>
          <div class="shopBasic row_between">
            <rich-text @click="openImg" :nodes="datas"></rich-text>
          </div>
        </div>
        <!-- :class="item.type == 'img' ? 'shopBasic-mark' : 'shopBasic-normal'" -->
      </div>
    </div>

    <!-- 检测信息 -->
    <!-- <div class="box" id="detection">
      <span class="box-title">检测信息</span>
      <div class="box-line"></div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in detection_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span
          class="shopBasic-span"
          :class="item.type == 'img' ? 'shopBasic-mark' : 'shopBasic-normal'"
          >{{ shopInfo[item.value] }}</span
        >
      </div>
    </div> -->

    <!-- 溯源信息 -->
    <div class="box" id="trace">
      <div class="box-auxiliary row_between">
        <span class="box-title">
          <image src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/17/pl8tIgsjVqx5efwwSBnNtm8TkYQOJAtL72LbIkkF.svg"></image>
          <text>溯源信息</text>
        </span>
        <div class="box-auxiliary-right row_start" @click="quality">
          <span>质检报告</span>
          <u-icon name="arrow-right" size="24"></u-icon>
        </div>
      </div>
      <div class="box-line"></div>
      <div class="shopBasic">
        <!-- <uni-steps
          :options="list2"
          active-color="#007AFF"
          :active="active"
          direction="column"
        /> -->
        <test :id="id" @setTime="setTime"></test>
      </div>
    </div>

    <!-- 留样视频 -->
    <div class="box" id="sample">
          <span class="box-title">
          <image src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/17/U1GZg6KJ4KXxNjUElE7CK2K4kU6AHXLSWwguCoS2.svg"></image>
          <text>留样视频</text>
        </span>
      <div class="box-line"></div>
      <view class="videos">
        <view class="preview" id="video-container" ref="videos"></view>
      </view>
    </div>

    <!-- 二级供应商资质 -->
    <div class="box" id="supplier2" style="margin-bottom: 20rpx" v-if="shopInfo.names">
      <div class="box-auxiliary row_between">
        <span class="box-auxiliary-left">
          <image src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/17/wpcCQMHuY06o8XHtkzGd3kGZpM8SR05pR9xNHmzN.svg"></image>
          二级供应商资质
        </span>
      </div>
      <div class="box-line"></div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in er_supplier_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span v-if="item.name=='供应商资质'" @click="openerzizhi(shopInfo.pics)" class="dgreen">
          查看资质
        </span>
        <span
        v-else
          class="shopBasic-span"
          :class="item.type == 'img' ? 'shopBasic-mark' : 'shopBasic-normal'"
          >{{ shopInfo[item.value] }}</span
        >
      </div>
    </div>

    <view class="skill" @click="caidj">
      <image src="/static/image/caidj.svg"></image>
      <text>菜东家提供技术支持</text>
    </view>

    <!-- 返回 -->
    <view class="back" @click="back" v-if="isSource">
      <image src="../../static/image/back.png"></image>
    </view>

    <view class="" v-if="loading">
      <loading></loading>
    </view>
    <view class="" v-if="!show_content">
      <start
        :start_loading="start_loading"
        :pic="shopInfo.pic"
        @getStartData="getStartData"
      ></start>
    </view>
  </div>
</template>

<script>
import parseHtml from "@/static/js/parseHtml.js";
import start from "./start";
import loading from "./components/loading";
import test from "./test.vue";
import { $https } from "@/static/js/request.js";
import EZUIKit from "ezuikit-js";
// #ifndef MP-WEIXIN
// #endif
let player = null;
const app = getApp().globalData;
export default {
  components: {
    start,
    loading,
    test,
  },
  data() {
    return {
      webViewUrl: null,
      url: "./components/index.html",
      data: {},
      datas: {},
      show_content: false,
      start_loading: true,
      loading: false, //加载loading
      pic: "",
      id: 10298142,

      // 商品基本信息
      shop_basic_info: [
        // {
        //   name: "商品描述",
        //   value: "",
        // },
        {
          name: "配送数量",
          value: "sort_num",
        },
        {
          name: "单位",
          value: "unit",
        },
        {
          name: "生产日期",
          value: "mfg",
        },
        {
          name: "保质期",
          value: "exp",
        },
        {
          name: "产地",
          value: "madein",
        },
        // {
        //   name: "配送单价",
        //   value: "sort_price",
        // },
      ],

      // 查询信息
      query_info: [
        {
          name: "溯源编码",
          value: "trace_code",
        },
        {
          name: "当前查询次数",
          value: "query_count",
        },
        {
          name: "首次查询时间",
          value: "first_query_time",
        },
      ],

      // 订单信息
      order_info: [
        {
          name: "下单客户",
          value: "nickname",
        },
        {
          name: "下单数量",
          value: "order_num",
        },
        {
          name: "发货数量",
          value: "collected_num",
        },
        {
          name: "归属单号",
          value: "order_sn",
        },
        {
          name: "退货数量",
          value: "return_num",
        },
      ],

      // 供应商信息
      supplier_info: [
        {
          name: "供应商资质",
          value: "company_qualification",
          type: "img",
        },
        {
          name: "供应商名称",
          value: "company_name",
        },
        {
          name: "联系地址",
          value: "company_address",
        },
      ],

      // 检测信息
      detection_info: [
        {
          name: "检测报告图片",
          value: "",
          type: "img",
        },
        {
          name: "检测日期",
          value: "",
        },
        {
          name: "送检机构",
          value: "",
        },
        {
          name: "检测机构",
          value: "",
        },
        {
          name: "检测员",
          value: "",
        },
      ],
      active: 1,
      time:"",
      list2: [
        {
          title: "买家下单",
          desc: "2018-11-11",
        },
        {
          title: "卖家发货",
          desc: "2018-11-12",
        },
        {
          title: "买家签收",
          desc: "2018-11-13",
        },
        {
          title: "交易完成",
          desc: "2018-11-14",
        },
      ],

      // 二级供应商信息
      er_supplier_info: [
        {
          name: "供应商资质",
          value: "",
          type: "img",
        },
        {
          name: "供应商名称",
          value: "names",
        },
        // {
        //   name: "联系地址",
        //   value: "",
        // },
      ],

      shopInfo: {
        exp: '',
        madein: '',
        name: null,
        company_name: null,
        company_qualification: null,
        company_address: null,
        pic: null,
        unit: null,
        sort_num: 0,
        sort_price: 0,
        trace_code: null,
        query_count: null,
        first_query_time: null,
        nickname: null,
        order_num: null,
        collected_num: null,
        order_sn: null,
        return_num: null,
        pics: null,
        names: null,
        company_yingshi: null,
        token: null,
      },

      infos: null,
      isSource: false,
    };
  },
  mounted() {
    // 是否是药残跳转过来的
    if(this.$route.query.source){
      this.isSource = true;
    }
    this.getInfoMation();
  },
  computed: {
    sumNum() {
      let sum =
        Number(this.shopInfo.sort_num) * Number(this.shopInfo.sort_price);
      return sum;
    },
    // 金刚位数组
    partList(){
      let list=[
        {
          icon:"goods",
          name:"商品信息"
        },
        {
          icon:"query",
          name:"查询信息"
        },
        {
          icon:"order",
          name:"订单信息"
        },
        {
          icon:"supplier",
          name:"供应商"
        },
        {
          icon:"detection",
          name:"质检报告"
        },
        {
          icon:"trace",
          name:"溯源信息"
        },
        {
          icon:"sample",
          name:"留样视频"
        },
        {
          icon:"supplier2",
          name:"二级供应商"
        },
      ]
      return list
    },
  },
  onLoad(options) {
    if (app.sourceShowStartPage) {
      this.show_content = false;
      this.start_loading = true;
    } else {
      this.show_content = true;
      this.loading = true;
      this.start_loading = false;
    }
    if (options.id) {
      uni.setStorageSync("sourceId", options.id);
      this.id = options.id;
    }
    this.start_loading = false;
  },
  methods: {
    initPlayer() {
      let that = this;
      const { windowWidth, windowHeight } = uni.getSystemInfoSync();
      player = new EZUIKit.EZUIKitPlayer({
        id: "video-container", // 视频容器ID
        accessToken: that.shopInfo.token,
        url: that.shopInfo.company_yingshi,
        // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
        template: "simple",
        // plugin: ['talk'], // 加载插件，talk-对讲
        width: windowWidth-50,
        height: (windowWidth * 2) / 3,
        header: ["capturePicture"],
        audio: 0,
        footer: ["broadcast", "hd", "fullScreen"],
      });
      window.player = player;
      window.player.stop();
      window.player.play();
    },
    // 富文本内的图片放大函数
    openImg() {
      let contentimg = this.infos;
      let imgs = contentimg.match(/<img[^>]+>/g); //把img所有节点的图片选择出来
      let arrImg = [];
      //遍历标签拼拿到你的图片的src里面的内容放在我们数组中
      for (var j = 0; j < imgs.length; j++) {
        imgs[j].replace(
          /<img[^>]*src=['"]([^'"]+)[^>]*>/gi,
          function (match, capture) {
            arrImg.push(capture);
          }
        );
      }
      //最后一步就是把我们的所有图片放在预览的api中就可以了
      uni.previewImage({
        urls: arrImg,
      });
    },
    play() {
      // player.play();
      var playPromise = player.play();
      playPromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    getData(id) {
      return new Promise((resolve, reject) => {
        $https(
          "GETN",
          "getTrace",
          {
            id,
          },
          (res) => {
            if (res.data.errcode == 0) {
              resolve(res.data.data);
            } else {
              reject(res.errmsg);
            }
          },
          true
        );
      });
    },
    getDatas(id) {
      return new Promise((resolve, reject) => {
        $https(
          "GETN",
          "traceResult",
          {
            order_list_id: id,
          },
          (res) => {
            if (res.data.errcode == 0) {
              resolve(res.data.data);
            } else {
              reject(res.errmsg);
            }
          },
          true
        );
      });
    },
    getraceDetail(id) {
      return new Promise((resolve, reject) => {
        $https(
          "GETN",
          "traceDetail",
          {
            order_list_id: id,
          },
          (res) => {
            if (res.data.errcode == 0) {
              resolve(res.data.data);
            } else {
              reject(res.errmsg);
            }
          },
          true
        );
      });
    },
    getPic() {
      return new Promise((resolve, reject) => {
        $https(
          "GETN",
          "companyQualification",
          {},
          (res) => {
            if (res.data.errcode == 0) {
              resolve(res.data.data);
            } else {
              reject(res.errmsg);
            }
          },
          true
        );
      });
    },
    // 下单时间
    setTime(time){
      this.time = time
    },
    quality() {
      uni.navigateTo({
        url: `./report?id=${this.id}&time=${this.time}`,
      });
    },
    getInfoMation() {
      let data = this.getData(this.id);
      let datas = this.getDatas(this.id);
      // let detail = this.getraceDetail();
      let picList = this.getPic(this.id);
      Promise.all([datas, picList, data])
        .then((res) => {
          this.shopInfo.pic = res[0].pic;
          this.shopInfo.name = res[0].name;
          this.shopInfo.sort_num = res[0].sort_num;
          this.shopInfo.unit = res[0].unit;
          this.shopInfo.sort_price = res[0].sort_price;
          this.shopInfo.exp = res[0].exp;
          this.shopInfo.mfg = res[0].mfg || '';
          this.shopInfo.madein = res[0].madein;

          this.shopInfo.nickname = res[2].order_info.nickname;
          this.shopInfo.order_num = res[2].order_info.order_num;
          this.shopInfo.collected_num = res[2].order_info.collected_num;
          this.shopInfo.order_sn = res[2].order_info.order_sn;
          this.shopInfo.return_num = res[2].order_info.return_num;
          

          this.shopInfo.trace_code = res[2].order_trace.trace_code;
          this.shopInfo.query_count = res[2].order_trace.query_count;
          this.shopInfo.first_query_time = res[2].order_trace.first_query_time;
          this.shopInfo.names = res[2].son_company.name;
          this.shopInfo.pics = res[2].son_company.pics;
          this.shopInfo.company_name = res[2].company_info.company_name;
          this.shopInfo.company_address = res[2].company_info.company_address;
          this.shopInfo.company_yingshi = res[2].company_info.company_yingshi;
          this.shopInfo.token = res[2].company_info.token;
          let result = res[2].company_info.company_qualification;
          let dist = null;
          let infos = null;
          if (result) {
            dist = result.replace(/\\\'/g, "");
            infos = this.formatRichText(dist);
            this.infos = infos;
            this.datas = parseHtml(infos);
            this.datas[0].children = this.datas[0].children.filter((value) => {
              return value.name == "img";
            });
          }

          this.$nextTick(() => {
            if (typeof window.EZUIKit !== "undefined") {
              this.initPlayer();
            } else {
              // 动态引入较大类库避免影响页面展示
              const script = document.createElement("script");
              // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
              script.src = "static/ezuikit.js";
              script.onload = this.initPlayer.bind(this);
              document.head.appendChild(script);
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="width:29%;float: left;height:auto;display:block;margin-top:0;margin-bottom:0;padding:5px"'
      );
      return newContent;
    },
    getStartData(data) {
      if (data.show_loading == false) {
        this.show_content = true;
      }
    },
    openerzizhi(url) {
      let imgsArray = [];
      imgsArray[0] = url;
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      });
    },
    caidj(){
			location.href = 'https://www.caidj.cn';
		},
    // 跳转
    jump(icon){
      if(icon=='detection'){
        this.quality()
        return
      }
      let dom = document.getElementById(icon);
      if(dom){
        uni.pageScrollTo({
          scrollTop: dom.offsetTop,
          duration: 300
        });
      }
    },
    // 返回
    back(){
      window.history.back();
    },
  },
};
</script>


<style lang="scss" scoped>
page {
  background: #fff;
  padding-bottom: 1rpx;
  font-size: 26rpx;
}

.dgreen{
  color: $dgreen;
}

.banner-top {
  position: relative;
  width: 750rpx;
  height: 350rpx;
  background: url("https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/16/Lj64VF5cBxT5MtaaAvRXNOBYRN68W14o7s03z0Ba.png")
    no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 9;
  margin: 0 auto;
}

.part{
  width: 750rpx;
  height: 360rpx;
  margin: 30rpx auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  &-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22%;
    image{
      width: 100rpx;
      height: 100rpx;
      margin-bottom: 10rpx;
    }
    text{
      font-size: 26rpx;
      font-weight: 400;
      color: #666666;
    }
  }
}

.box {
  width: 654rpx;
  margin: 24rpx 24rpx 0 24rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 24rpx;
  box-shadow: 0 0 10rpx #dedede;
  &-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    image{
      width: 29rpx;
      height: 31rpx;
      margin-right: 13rpx;
    }
  }

  &-auxiliary {
    align-items: center;

    &-left {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
       image{
        width: 29rpx;
        height: 31rpx;
        margin-right: 13rpx;
      }
    }

    &-right {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      align-items: center;
    }
  }

  &-line {
    border-bottom: 1rpx solid #eeeeee;
    margin-top: 24rpx;
  }

  .shop {
    align-items: center;

    image {
      min-width: 138rpx;
      width: 138rpx;
      height: 186rpx;
      border: 1rpx solid #eeeeee;
    }

    &-info {
      height: 186rpx;
      margin-left: 24rpx;
      justify-content: space-between !important;

      &-title {
        font-size: 32rpx;
        font-weight: 600;
        text-align: center;
        color: #333333;
        width: 100%;
        margin: 20rpx 0;
      }

      &-menu {
        font-size: 32rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }

  .shopBasic {
    margin-top: 20rpx;
    overflow: auto;

    &-title {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
    }

    &-span {
      width: 454rpx;
      text-align: right;
      font-size: 26rpx;
      font-weight: 400;
    }

    &-mark {
      color: #21be73;
    }

    &-normal {
      color: #333333;
    }

    &-img {
      width: 450rpx;
      height: 300rpx;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-imgs {
      width: 100%;
      height: auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .line {
    border-bottom: 1rpx solid #eeeeee;
    margin-top: 28rpx;
  }

  .price {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    margin-top: 32rpx;
    text-align: right;
  }
}

.status-btn {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 92rpx;
  margin: 30rpx;
  background-color: #007aff;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  padding: 15px;
  flex-direction: row;
}

uni-video {
  width: 100%;
}


.videos {
  width: 100%;
  /deep/#video-container-wrap {
    border-radius: 20rpx;
    margin-top: 20rpx;
    overflow: hidden;
    #video-container {
      width: 100% !important;
    }
  }
}
.skill{
  margin: 20rpx auto;
  text-align: center;
  image{
    width: 150rpx;
    height: 40rpx;
    display: block;
    margin: 0 auto;
  }
  text{
    font-size: 20rpx;
    color:#999;
  }
}

.back{
  position: fixed;
  bottom: 100rpx;
  right: 26rpx;
  image {
    width: 64rpx;
    height: 64rpx;
    box-shadow: 0 0 20rpx 2rpx rgba(0,0,0,0.15);
    border-radius: 50%;
  }
}
</style>
